import React from 'react';
import NavLink from '../modules/NavLink'
import IndexStyle from '../style/index.scss'
import styles from '../style/toplist.scss';
import Swiper from '../js/swiper.min.js'; 
import jquery from '../js/jquery';

export default class Header extends React.Component {
	render(){
		var j=jquery.noConflict();
		function foucsInput(){
			var jQueryvalue = j('#seach').val();
			console.log(jQueryvalue);
			$('#musiclist').show();
			if(!jQueryvalue){
			j.ajax({
			type:'get',
			url:'http://www.genzqi.online/qqmusic/php/seach.php',
			dataType:'jsonp',
			data:{
				value:"l"
			},
			jsonp:'cb',
			success:function(d){
				var data0 = d.substring(6, d.length-1);
				var data1 = JSON.parse(data0);
				if (data1.code == 0) {
					var len=data1.data.singer.itemlist.length;
					var html = '';
					for(var i = 0;i<len;i++){
						html += '<li x='+i+'><span>'+(i+1)+'</span><span class="seachVal">'+data1.data.singer.itemlist[i].singer+'</span></li>';
					}
					for(var i = 2;i<len+2;i++){
						html += '<li x='+(i)+'><span>'+(i+1)+'</span><span class="seachVal">'+data1.data.song.itemlist[i-2].singer+'</span></li>';
					}
					j('#musiclist').html(html);
					console.log($('#musiclist').find('li').length);
					$('#musiclist').find('li').click(function(){
						$('#seach').val($(this).find('.seachVal').html());
						$('#musiclist').hide();
					})
				}else{
					j('#musiclist').html('');
				}
			},
			error:function(){
				alert('error');
			}
		})}else{
			seachInput();
		}
		}
		function seachInput(){
			var jQueryvalue = j('#seach').val();
			$('#musiclist').show();
			console.log(jQueryvalue);
			if(jQueryvalue){
			j.ajax({
			type:'get',
			url:'http://www.genzqi.online/qqmusic/php/seach.php',
			dataType:'jsonp',
			data:{
				value:jQueryvalue
			},
			jsonp:'cb',
			success:function(d){
				var data0 = d.substring(6, d.length-1);
				var data1 = JSON.parse(data0);
				if (data1.code == 0) {
					var len=data1.data.song.itemlist.length;
					var html = '';
					for(var i = 0;i<len;i++){
						html += '<li x="'+i+'"><span>'+(i+1)+'</span><span class="seachVal">'+data1.data.song.itemlist[i].name+'</span></li>';
					}
					j('#musiclist').html(html);
					$('#musiclist').find('li').click(function(){
						$('#seach').val($(this).find('.seachVal').html());
						$('#musiclist').hide();
					})
				}else{
					j('#musiclist').html('');
				}
				
				console.log(document.getElementById('musiclist').getElementsByTagName('li')[0])
			},
			error:function(){
				alert('error');
			}
		})}else{
			foucsInput();
		}
		}
		
		function SwiperRe(){
			setTimeout(function(){
			
			
			var swiper = new Swiper('.lunbo1 .swiper-container', {
		        pagination: '.lunbo1 .swiper-pagination',
		        paginationClickable: true,
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        parallax: true,
		        speed: 600,
		    });
		    var swiper = new Swiper('.lunbo2 .swiper-container', {
		        pagination: '.lunbo2 .swiper-pagination',
		        effect: 'coverflow',
		        grabCursor: true,
		        centeredSlides: true,
		        slidesPerView: 'auto',
		        coverflow: {
		            rotate: 50,
		            stretch: 0,
		            depth: 100,
		            modifier: 1,
		            slideShadows : true
		        }
		    });
		    var swiper = new Swiper('.lunbo3 .swiper-container', {
		        pagination: '.lunbo3 .swiper-pagination',
		        paginationClickable: '.swiper-pagination',
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        spaceBetween: 30,
		        effect: 'fade'
		    });
			$(".list-box").mouseover(function(){
			   $(this).find($('.gogogo')).css('display','block');
			});
			$(".list-box").mouseleave(function(){
			   $(this).find($('.gogogo')).css('display','none');
			});
			$('.toplist-main-list').find($('li')).mouseover(function(){
				$(this).find($('.no-action')).stop().hide();
				$(this).find($('.action')).stop().show();
			});
			$('.toplist-main-list').find($('li')).mouseleave(function(){
				$(this).find($('.no-action')).stop().show();
				$(this).find($('.action')).stop().hide();
			});
		},300)
	}
		return(
			<div>
				<div className={IndexStyle.header}>
					<div className={IndexStyle.headerContent}>
						<h1 className={IndexStyle.logoImg}><img src="https://y.gtimg.cn/mediastyle/yqq/img/logo.png" /></h1>
						<ul className={IndexStyle.headNav}>
							<li className={IndexStyle.NavActive}><a href="javascript:;">音乐馆</a></li>
	            			<li><a href="javascript:;">我的音乐</a></li>
	            			<li><a href="javascript:;">下载客户端</a></li>
	            			<li><a href="http://www.smilening.online/newqqmusic/html/vip.html" target="_blank">VIP</a></li>
						</ul>
						<p className={IndexStyle.searchBox}>
							<input onInput={seachInput} onFocus={foucsInput} id={'seach'} className={IndexStyle.search} type="text" placeholder="金曲捞" />
							<ul id={"musiclist"}></ul>
						</p>
						<p className={IndexStyle.btnLogin}>
							<a href="http://www.smilening.online/newqqmusic/html/login.html" id={'login'} className={IndexStyle.login}>登录</a>
							<a href="javascript:;" className={IndexStyle.lvzuan}>开通绿钻豪华版</a>
							<a href="javascript:;" className={IndexStyle.fufeibao}>开通付费包</a>
						</p>
					</div>
					<div className={IndexStyle.mainNav}>
						<ul className={IndexStyle.mainNavs} id="mainNavs">
							<li onClick={SwiperRe()}><NavLink  to="/" onlyActiveOnIndex><span>首页</span></NavLink></li>
				            <li><NavLink to="/singer"><span>歌手</span></NavLink></li>
				            <li><NavLink to="/album"><span>专辑</span></NavLink></li>
				            <li><NavLink to="/toplist"><span>排行榜</span></NavLink></li>
				            <li><NavLink to="/playlist"><span>分类歌单</span></NavLink></li>
				            <li><NavLink to="/mv"><span>MV</span></NavLink></li>
						</ul>
					</div>
				</div>
			</div>
		)
	}
}


